<!-- 基础数据（角色） -->
<template>
 <div>
  <el-card>
        <div class="topInquire">
          <div>
            <!-- 渠道 -->
            <Channel @channel-event="handleSelectChannel"></Channel>
          </div>
  
          <div>
          <!-- 服务器 -->
          <Server @server-event="handleSelectServer"></Server>
          </div>
  
          <!-- <div> -->
          <!-- 日期 -->
          <DatePicker @dateChange="handleDateChange"></DatePicker>
          <!-- </div> -->
  
          <el-button 
          size="small" 
          icon="el-icon-search" 
          type="primary" @click="handleSearch">搜索</el-button>

          <el-button icon="el-icon-upload2" type="success" 
          size="small" @click="handleExport">导出Excel</el-button>

          <el-button icon="el-icon-refresh" type="success"
          size="small" @click="handleRefresh">刷新实时数据</el-button>
        </div>
  
        <div>
          <el-table
            ref="table"
            border
            :data="playerSummaryData"
            :height="tableHeight"
            show-summary
          >
            <el-table-column prop="date" label="日期" min-width="120" />
            <el-table-column prop="channelInfo" label="渠道信息" min-width="120" />
            <el-table-column label="整体汇总" align="center">
                <el-table-column prop="newPlayerCount" label="新增角色" min-width="150" />
                <el-table-column prop="playerDAU" label="角色DAU" min-width="150" />
                <el-table-column prop="totalPay" label="付费总额" min-width="150" />
                <el-table-column prop="payPlayerCount" label="付费人数" min-width="150" />
                <el-table-column prop="payArpu" label="付费ARPU" min-width="150" />
                <el-table-column prop="payRate" label="付费率" min-width="150" />
              <el-table-column prop="activeArpu" label="活跃ARPU" min-width="150" />
            </el-table-column>
        <el-table-column label="新增角色数据" align="center">
            <el-table-column prop="newComerPayMoney" label="新增角色付费总额" min-width="150" />
            <el-table-column prop="newComerPayCount" label="新增角色付费人数" min-width="150" />
            <el-table-column prop="newArpu" label="新增角色付费ARPU" min-width="150" />
            <el-table-column prop="newPayRate" label="新增角色付费率" min-width="150" />
        </el-table-column>
        <el-table-column label="老角色数据" align="center">
            <el-table-column prop="oldComerPayMoney" label="老角色付费总额" min-width="150" />
            <el-table-column prop="oldComerPayCount" label="老角色付费人数" min-width="150" />
            <el-table-column prop="oldArpu" label="老角色付费ARPU" min-width="150" />
            <el-table-column prop="oldPayRate" label="老角色付费率" min-width="150" />
        </el-table-column>
        </el-table>
    </div>
</el-card>
  
</div>
</template>
  
  <script>
  import Channel from '@/components/selectChannel/index.vue'
  import Server from '@/components/selectServer/index.vue'
  import DatePicker from '@/components/datePicker/index.vue'
  import { export_json_to_excel } from '@/widget/Export2Excel'

  import { playerSummary,manualTodayPlayerSum  } from '@/api/gameStatistics'
  
  export default {
    components: {
     Channel,Server,DatePicker
    },
    data() {
      return {
        playerSummaryData: [],
        currentPage: 1, // 当前页
        pageSize: 200, // 每页显示条数
        tableHeight: 0, // 表格高度
        selectChannel:[],
        selectServer:[],
        date:[],
        total:0
      }
    },
  
    created() {
      this.getPlayerSummary()
    },
  
    mounted() {    
      this.$nextTick(() => {
        this.getTableHeight()
      })
      window.addEventListener('resize', this.$debounce(this.getTableHeight, 100))
    },
  
    beforeDestroy() {
      window.removeEventListener('resize', this.getTableHeight)
    },
  
    methods: {
      // 获取数据
      async getPlayerSummary() {
        const res = await playerSummary({
          page: this.currentPage,
          limit: this.pageSize
        })
        this.playerSummaryData = res.data.data.data
        this.total = res.data.data.count
      },

      // 选择日期
      handleDateChange(dateRange){
        this.date = dateRange
      },

      // 选中的渠道
      handleSelectChannel(value){
        this.selectChannel = value
      },

      // 选中的服务器
      handleSelectServer(value){
        this.selectServer = value
      },

      // 刷新实时数据
      async handleRefresh(){
        const res = await manualTodayPlayerSum()
          if (res.data.code === 0) {
            this.$message.success(res.data.message)
          }
        this.getPlayerSummary()
      },
  
      // 搜索
      async handleSearch() {
        try {
          const query = {}
          if (this.date && this.date.length === 2) {
            // 时间戳毫秒转化为秒
            query.startTime = this.$moment(this.date[0]).unix()
            query.endTime = this.$moment(this.date[1]).unix()
          }
          if (this.selectChannel.length !== 0) {
          query.channels = this.selectChannel
        }
        if (this.selectServer.length !== 0) {
          query.serverUids = this.selectServer
        }
          const result = await playerSummary(query)
          this.playerSummaryData = result.data.data.data
        } catch (error) {
          console.error(error)
          this.$message.error('发生错误，请稍后重试')
        }
      },
  
      // 表格自适应高度
      getTableHeight() {
        if (this.$refs.table && this.$refs.table.$el) {
          this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 140
        } else {
          this.tableHeight = 300
        }
      },

     // 导出
     async handleExport() {
      try {
        const res = await playerSummary({
          limit: this.total
        })

        const newData = res.data.data.data.map(item => {
          const arr = []
          const obj = {
            date: '日期',
            channelInfo: '渠道信息',
            newPlayerCount: '新增角色',
            playerDAU: '角色DAU',
            totalPay: '付费总额',
            payPlayerCount: '付费人数',
            payArpu: '付费ARPU',
            payRate: '付费率',
            activeArpu: '活跃ARPU',
            newComerPayMoney: '新增角色付费总额',
            newComerPayCount: '新增角色付费人数',
            newArpu: '新增角色付费ARPU',
            newPayRate: '新增角色付费率',
            oldComerPayMoney: '老角色付费总额',
            oldComerPayCount: '老角色付费人数',
            oldArpu: '老角色付费ARPU',
            oldPayRate: '老角色付费率',
          }
          for (const key in obj) {
            arr.push(item[key])
          }
          return arr
        })

        const tHeader = [
          '日期', '渠道', '新增角色', '角色DAU', '付费总额', '付费人数', '付费ARPU', '付费率','活跃ARPU',
          '新增角色付费总额', '新增角色付费人数','新增角色付费ARPU', '新增角色付费率', '老角色付费总额', 
          '老角色付费人数', '老角色付费ARPU', '老角色付费率']

        export_json_to_excel({
          header: tHeader,
          data: newData,
          filename: `基础数据（角色）表${this.$moment(new Date()).format('YYYYMMDDHHmm')}`,
          autoWidth: true,
          bookType: 'xlsx'
        })
      } catch (error) {
        this.$message.error(error)
      }
    },
          
    }
  }
  </script>
  <style lang="scss" scoped>
  
  .topInquire{
    font-weight: bold;
    font-size: 14px;
    color: #6a7488;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }
  
  </style>
  